<template>
	<view class="item" @click="navDetails(MyOrder.oid)">
		<view class="itemHeadr">
			<view class="order">订单号：{{ MyOrder.order_sn }}</view>
			<view class="pay state">
				<text v-for="item in tabList" v-if="MyOrder.order_status === item.type">
					{{ item.name }}
				</text>
			</view>
		</view>
		<goodsitem :info="InfoItem" v-for="(InfoItem, index) in MyOrder.goods" :key="InfoItem.goods_id"></goodsitem>
		<view class="opt flex">
			<view class="total flex">
				<!-- <view class="">
					<text>团员：13855668899</text>
				</view> -->
				<view class="flex">
					<text class="labe">合计：</text>
					<text class="val">{{ MyOrder.order_amount }}</text>
				</view>
			</view>
			<!-- <view class="btnbox">
				<view class="btn cancel">
					取消订单
				</view>
				<view class="btn act">
					立即评价
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import goodsitem from './goodsitem.vue';
	export default {
		name: 'orderItem',
		components: {
			goodsitem,
		},
		data() {
			return {};
		},
		props: {
			MyOrder: {
				type: Object,
				default: () => {},
			},
			tabList: {
				type: Array,
				default: [],
			},
		},
		mounted() {
			console.log(this.MyOrder);
		},
		methods: {
			navDetails(e) {
				uni.navigateTo({
					url: '/pages/my/order/details/details?id=' + e,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.item {
		width: 690rpx;
		height: auto;
		background: $content-bg-colcor;
		border-radius: $border-radius;
		margin: $margin-width;

		.itemHeadr {
			display: flex;
			// padding: 0 30rpx;
			border-bottom: 1rpx solid #dddddd;
			width: 690rpx;
			margin: 0 auto;
			justify-content: space-between;
			line-height: 61rpx;
			font-size: $uni-font-size-12;

			.order {
				color: $placeholder-colcor;
				margin-left: $margin-width;
			}

			.state {
				color: $title-colcor;
				margin-right: $margin-width;
			}

			.pay {
				color: $price-color;
			}
		}

		.opt {
			width: 630rpx;
			margin: 0 auto;
			border-top: 1rpx solid $search-border-color;
			flex-direction: column;
			align-items: flex-end;
			justify-content: flex-end;

			.total {
				font-size: $uni-font-size-12;
				line-height: 85rpx;
				justify-content: end;
				width: 100%;

				.val {
					color: $price-color;
				}
			}

			.btnbox {
				display: flex;

				.btn {
					width: auto;
					padding: 5rpx $submargin-width;
					height: auto;
					background: #ffffff;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					border: 1rpx solid #999999;
					text-align: center;
					// line-height: 50rpx;
					color: $placeholder-colcor;
					margin-bottom: 30rpx;
					margin-left: $margin-width;
					font-size: $uni-font-size-12;
				}

				.act {
					border-color: $price-color;
					color: $price-color;
				}
			}
		}
	}
</style>
